<template>
  <div style="padding: 30px">
    <el-card>
      <div style="margin-bottom: 20px">
        <el-select
          v-model="type"
          clearable
          placeholder="请选择类型"
          style="width: 200px; margin-right: 20px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="state"
          clearable
          placeholder="请选择状态"
          style="width: 200px; margin-right: 20px"
        >
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          style="margin-top: 10px"
          @click="getList"
        >搜索</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed type="index" :index="indexMethod" />
        <el-table-column prop="type" label="类型" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 1">投诉</span>
            <span v-if="scope.row.type === 2">留言</span>
            <span v-if="scope.row.type === 3">建议</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" width="220" label="姓名" align="center" />
        <el-table-column prop="phone" width="220" label="电话" align="center" />
        <el-table-column prop="content" label="反馈信息" />
        <el-table-column prop="state" label="状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state === 1" type="danger"> 未处理 </el-tag>
            <el-tag v-else> 已处理 </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="remark" label="备注" align="center" /> -->
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleClick(scope.row)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-size="10"
        layout="total, pager, next, jumper"
        :current-page="query.pageNo + 1"
        :total="query.total"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog title="查看详情" :visible.sync="dialogFormVisible" width="80%">
      <el-form
        ref="contentAddForm"
        :rules="rules"
        :model="contentAddForm"
        style="padding: 20px"
      >
        <el-row :gutter="30" style="margin-top: 20px">
          <el-col :span="6">
            <!-- <el-form-item label="类型：" prop="path">
              <el-input v-model="contentAddForm.type" />
            </el-form-item> -->
            <label for="">类型：</label>

            <el-tag
              v-if="contentAddForm.type == 1"
              type="info"
              style="color: red"
            >投诉</el-tag>
            <el-tag
              v-if="contentAddForm.type == 2"
              type="info"
              style="color: red"
            >留言</el-tag>
            <el-tag
              v-if="contentAddForm.type === 3"
              type="info"
              style="color: red"
            >建议</el-tag>
          </el-col>
          <el-col :span="6">
            <label for="">反馈板块页面：</label>
            <el-tag type="info">{{
              contentAddForm.menuName ? contentAddForm.menuName : '--'
            }}</el-tag>
          </el-col>
          <el-col :span="6">
            <label for="">提交时间：</label>
            <el-tag type="info">{{
              contentAddForm.createTime
                ? returnTime(contentAddForm.createTime)
                : '--'
            }}</el-tag>
          </el-col>
        </el-row>
        <el-row :gutter="30" style="margin-top: 50px">
          <el-col :span="6">
            <label for="">姓名：</label>
            <el-tag type="info">{{
              contentAddForm.name ? contentAddForm.name : '--'
            }}</el-tag>
          </el-col>

          <el-col :span="6">
            <label for="">电话：</label>
            <el-tag type="info">{{
              contentAddForm.phone ? contentAddForm.phone : '--'
            }}</el-tag>
          </el-col>
          <el-col :span="6">
            <label for="">邮箱：</label>
            <el-tag type="info">{{
              contentAddForm.mail ? contentAddForm.mail : '--'
            }}</el-tag>
          </el-col>
          <el-col :span="6">
            <label for="">地址：</label>
            <el-tag type="info">{{
              contentAddForm.address ? contentAddForm.address : '--'
            }}</el-tag>
          </el-col>
        </el-row>
        <el-row :gutter="30" style="margin-top: 50px">
          <el-col :span="6">
            <label for="">备注：</label>
            <el-tag v-if="contentAddForm.remark" type="danger">{{
              contentAddForm.remark
            }}</el-tag>
            <el-tag v-else type="info"> --</el-tag>
          </el-col>
          <el-col :span="6">
            <label for="">反馈内容：</label>
            <el-tag type="danger">{{
              contentAddForm.content ? contentAddForm.content : '--'
            }}</el-tag>
          </el-col>
          <el-col :span="6">
            <div style="display: flex">
              <label for="">图片：</label>
              <!-- <img style="width: 100px" :src="" alt="" srcset="" /> -->
              <div class="demo-image__preview">
                <el-image
                  v-if="contentAddForm.image"
                  style="width: 100px; height: 100px"
                  :src="contentAddForm.image"
                  :preview-src-list="[contentAddForm.image]"
                />
                <el-tag v-else type="info">--</el-tag>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="30" style="margin-top: 50px">
          <el-col :span="6">
            <label for="">状态：</label>
            <el-tag v-if="contentAddForm.state === 1" type="danger">
              未处理
            </el-tag>
            <el-tag v-else> 已处理 </el-tag>
          </el-col>
          <el-col v-if="contentAddForm.answer" :span="6">
            <label for="">回复内容：</label>
            <el-tag>{{
              contentAddForm.answer ? contentAddForm.answer : '--'
            }}</el-tag>
          </el-col>
          <el-col :span="6">
            <label for="">回复时间：</label>
            <el-tag type="info">{{
              contentAddForm.handleTime
                ? returnTime(contentAddForm.handleTime)
                : '--'
            }}</el-tag>
          </el-col>
        </el-row>
        <el-form-item v-if="!contentAddForm.answer" label="回复内容：">
          <el-input v-model="answer" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="contentAddForm.state === 1"
          @click="cancelClick('contentAddForm')"
        >取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm('contentAddForm')"
        >处 理</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import { setMenuObj, getMenuObj, removeMenuObj } from '@/utils/auth' // get token from cookie
import { listContent, detailContent, addContent, listAll } from './api/index' // get token from cookie
import dayjs from 'dayjs'
// import Oss from '@/utils/oss'
// import { getStsToken } from '@/utils/auth'
// type：1 投诉 2留言 3建议
// state：1 已提交  2已处理

export default {
  data() {
    return {
      dialogFormVisible: false,
      answer: '',
      // options: ['投诉', '留言', '建议'],
      // stateOptions: ['未处理', '已处理'],
      stateOptions: [
        {
          value: 1,
          label: '未处理'
        },
        {
          value: 2,
          label: '已处理'
        }
      ],
      menuOptions: [],
      options: [
        {
          label: '投诉',
          value: 1
        },
        {
          label: '留言',
          value: 2
        },
        {
          label: '建议',
          value: 3
        }
      ],
      type: '',
      state: '',
      query: {
        pageNo: 0,
        pageSize: 10,
        menuId: '',
        subMenuId: '',
        total: 0
      },
      rules: {
        publishTime: [
          { required: true, message: '请选择发布时间', trigger: 'blur' }
        ], // 发布时间
        title: [{ required: true, message: '请输入活', trigger: 'blur' }] // 标题
      },
      contentAddForm: {
        content: '', // 内容
        image: '', // 缩略图
        publishTime: +new Date(), // 发布时间
        recap: '', // 摘要
        state: 1, //  1 显示（默认）  3隐藏
        title: '', // 标题
        top: 1 // 置顶    1不置顶 （默认）   2置顶
      },
      tableData: []
      // oss: {}
      // stsToken: {
      //   accessKeyId: 'LTAI5tCQiELrNuXxFdf5wyuB',
      //   accessKeySecret: 'VlsN1KXHj4RV709wAOIHOnzjn9Qbke',
      //   bucket: 'utopia9527',
      //   region: 'oss-cn-shanghai'
      // }
    }
  },
  created() {
    // listAll().then((response) => {
    //   this.menuOptions = response.obj.data
    // })
    this.getList()
  },
  methods: {
    formShow() {
      this.dialogFormVisible = true
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.contentAddForm)
          const config = {
            answer: this.answer,
            id: this.contentAddForm.id
          }
          if (this.contentAddForm.state === 1) {
            addContent(config).then((res) => {
              if (res.code === 1) {
                this.$message.success('操作成功')
                this.dialogFormVisible = false
                this.init()
                this.getList()
              }
            })
          } else {
            this.dialogFormVisible = false
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancelClick(formName) {
      this.init(formName)
      this.$refs[formName].resetFields()
      this.dialogFormVisible = false
    },
    init(formName) {
      this.contentAddForm = {
        content: '', // 内容
        image: '', // 缩略图
        menuId: 0,
        publishTime: '', // 发布时间
        recap: '', // 摘要
        state: 1, //  1 显示（默认）  3隐藏
        subMenuId: '',
        title: '', // 标题
        top: 1 // 置顶    1不置顶 （默认）   2置顶
      }
    },
    getList() {
      const config = Object.assign({}, this.query, {
        type: this.type ? this.type : undefined,
        state: this.state ? this.state : undefined
      })
      listContent(config).then((res) => {
        console.log(res)
        this.tableData = res.obj.data
        this.query.total = res.obj.count
      })
    },
    returnTime(item) {
      return dayjs(item).format('HH:mm:ss')
    },
    returnDay(item) {
      return dayjs(item).format('YYYY-MM-DD')
    },
    handleClick(item) {
      this.answer = ''
      this.dialogFormVisible = true
      detailContent({ id: item.id }).then((res) => {
        this.contentAddForm = Object.assign({}, res.obj, {
          id: item.id,
          image: res.obj.image
        })
        // const ossConfig = {
        //   expires: 3600,
        //   process: 'image/auto-orient,1/quality,q_90/format,src'
        // }
        this.dialogFormVisible = true
      })
    },

    indexMethod(index) {
      return this.query.pageNo * this.query.pageSize + (index + 1)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.query.pageNo = val - 1
      this.getList()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
